<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul,li{
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
            float: left;
        }
        li a {
            text-decoration: none;
            color: #2D2D2D;
            background: url("images/bg_r1_c1.png") no-repeat;
            display: inline-block;
            height: 35px;
            padding-left: 7px;
        }
        li span {
            display: inline-block;
            height: 35px;
            line-height: 35px;
            background: url("images/bg_r1_c2.png") no-repeat right;
            padding-right: 25px;
        }
        li a:hover {
            background: url("images/bbg_r1_c1.png") no-repeat;
        }
        li span:hover {
            background: url("images/bbg_r1_c2.png") no-repeat right;;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#"><span>爸爸</span></a></li>
    <li><a href="#"><span>我是你爸爸</span></a></li>
    <li><a href="#"><span>我是你爹你爹</span></a></li>
</ul>
</body>
</html>